<!-- 入库单编辑弹窗 -->
<template>
  <ele-drawer
    size="calc(100vw - 250px)"
    :model-value="modelValue"
    title="移库详情"
    @update:model-value="updateModelValue"
  >
    <div>
      <el-descriptions title="单据详情" :column="4">
        <el-descriptions-item label="单据编号">{{ info.order_sn }}</el-descriptions-item>
        <el-descriptions-item label="商品数">{{ info.product_num }}</el-descriptions-item>
        <el-descriptions-item label="平台">{{ info.mch_name }}</el-descriptions-item>
        <el-descriptions-item v-if="info.supplier_name" label="货主">{{ info.supplier_name }}</el-descriptions-item>
        <el-descriptions-item label="仓库">{{ info.warehouse_name }}</el-descriptions-item>
        <el-descriptions-item label="单据日期">{{ info.order_date }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ info.create_user_name }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{ formatDate(info.create_time) }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="mt-20px" title="商品信息" :column="4" />
      <el-table :data="info.product" stripe>
        <el-table-column type="index" label="序" width="50" align="center" />
        <el-table-column prop="product_name" label="商品名称" min-width="140" />
        <el-table-column prop="product_code" label="商品编码" align="center" />
        <el-table-column prop="old_location_name" label="旧库位" align="center" />
        <el-table-column prop="new_location_name" label="新库位" align="center" />
        <el-table-column prop="unit" label="主单位" align="center" />
      </el-table>
    </div>
  </ele-drawer>
</template>

<script setup>
const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object,
})

const emit = defineEmits(['update:modelValue', 'done', 'openEdit'])

const { formatDate } = utils

/** 详情数据 */
const info = ref({
  product: [],
})

function getInfo() {
  utils.get('/stockMove/info', { id: props.data.id }).then((res) => {
    info.value = res.data
  })
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      getInfo()
    }
    else {
      info.value = {}
    }
  },
)
</script>
